<template>
  <div id="app">
    <nav>
      <!-- 1. 声明式路由 router-link 默认会解析为a标签
              tag 设置解析成什么标签。
        -->
      <router-link tag="button" to="/tabbar">Tabbar</router-link> |
      <router-link to="/home">Home</router-link> |
      <router-link to="/about">About</router-link> |
      <router-link to="/news">News</router-link> |
    </nav>
    <button @click="fn">编程式路由跳转1</button>
    <button @click="fn2">命名路由传参</button>
    <button @click="fn3">查询参数</button>
    <!-- 路由出口 -->
    <router-view />
  </div>
</template>

<script>
export default {
  methods: {
    fn() {
      //2. 编程式路由跳转  $router.push()
      // this.$router.push("/about");  //字符串 简写

      this.$router.push({ path: "/about" }); //对象写法
    },
    fn2() {
      //命名路由传参  (注意 给路由增加name属性)
      // 路径： /news/text/9/新的标题 接收 $route.params.xxx
      this.$router
        .push({
          name: "textdetail",
          params: { id: 9, title: "新的标题" },
        })
        .catch((err) => err);
    },
    fn3() {
      //查询query参数
      //跳转到about页面，并且传递一个id参数过去
      // 路径：about?id=99&name=zhangsan 接收 $route.query.xxx
      this.$router.push({
        path: "/about",
        query: {
          id: 99,
          name: "zhangsan",
        },
      });
    },
  },
};
</script>


<style lang="less">
#app {
  font-family: Avenir, Helvetica, Arial, sans-serif;
  -webkit-font-smoothing: antialiased;
  -moz-osx-font-smoothing: grayscale;
  text-align: center;
  color: #2c3e50;
}

nav {
  padding: 30px;

  a {
    font-weight: bold;
    color: #2c3e50;

    &.router-link-exact-active {
      color: #42b983;
    }
  }
}

/* 
  方式一： 可视化操作 
  1.vue ui
  2.导入当前项目
  3.在当前项目 - 插件  上面点击添加 vue-router 
  4.观察代码的修改
    修改homeView.vue组件删除helloworld
  5.npm run serve 重启 

  方式二：
  vue add router

  方式三：
  在创建vue项目时，勾选中router，需要选择路由模式（history，hash）


  0.tabbar的切换
  1.创建项目（安装路由）
  2. 路由知识点：
    一级路由配置
    二级路由配置（嵌套路由配置）
    路由传参（配置） ：id
    路由的跳转
        声明式路由
        编程式路由

   params参数  /1/xxxx               $route.params.xxx
   query参数   ?id=1&title=xxx       $route.query.xxx

    重定向  redirect

   路由重复点击的bug： 修改prototype上的push方法，统一进行catch处理

   vuex
*/
</style>

